<template>
  <div>
    <van-tabbar v-model="active" active-color="#ee0a24" inactive-color="#000">
      <van-tabbar-item replace :to="item.path" :name="item.code" :icon="item.icon" v-for="(item,index) in navList" :key="index">{{item.name}}</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import {ref,getCurrentInstance,watch} from 'vue'
import{useRoute} from "vue-router"
import { Toast } from 'vant';
export default {
  setup() {
    // 路由信息
    const route = useRoute()
    // 底部导航选中标识
    const active = ref('home');
    // 监视route，因为在setup当中初始拿到的值是 undefined
    watch(()=>route.meta.active,(v) => {
        active.value = v
      }
    )
    // console.log(moment());
    // 获取全局变量得到$axios
    const {proxy} = getCurrentInstance()
    // 导航数据
    let navList = ref(null)
    function getNavBottom(){
      proxy.$axios.get('/nav-bottom').then(res=>{
        if(res.code=='200'){
          navList.value = res.data;
        }else{
          Toast.fail(res.data);
        }
      }).catch(err=>{
        console.log(err);
      })
    }
    getNavBottom()
    return{
      active,
      navList
    }
  }
}
</script>
<style lang="less" scoped>

</style>